import React,{ Component , Fragment} from 'react';
import './GoodsShow.css'
import ActivitiBanner from './ActivitiBanner'
import GoodsItem from './GoodsItem'
import axios from 'axios'
import bannerFrist from '../../assets/homeGoods/title-img2.jpg'
import { getGoodsList, getBannerList } from '../../api/api'

export default class GoodsShow extends Component{
    constructor(props){
        super(props);
        this.state = {
            goodsLists:[],
            bannerLists:[]
        }
    }
    componentDidMount(){
        // axios({
        //     url:'http://localhost:3000/api/goodsLists',
        //     method:'get'
        // }).then(res=>{
        //     this.setState({
        //         goodsLists : [...res.data.message]
        //     })
        // })
        getGoodsList().then(res=>{
            console.log(res)
            this.setState({
                goodsLists : [...res.data.message]
            })
        })
        getBannerList().then(res=>{
            this.setState({
                bannerLists : [...res.data.message]
            })
        })
    }


    getBannerList(){
       let bannerLists = this.state.bannerLists;
       if(bannerLists.length>0){
            
            return bannerLists.map((item,index)=>{
                return (
                    <Fragment key={index}>
                        <ActivitiBanner
                        pic={item.banner_img}
                        />
                    </Fragment>
                )
            })
       }
    }

    getGoodsList(){
        let goodsLists = this.state.goodsLists;
        if(goodsLists.length>0){
             var map = {},
             dest = [];
             for (var i = 0; i < goodsLists.length; i++) {
                 var ai = goodsLists[i];
                 if (!map[ai.bannerUrl]) {
                     dest.push({
                         bannerUrl: ai.bannerUrl,
                         goodsList: [ai]
                     });
                     map[ai.bannerUrl] = ai;
                 } else {
                     for (var j = 0; j < dest.length; j++) {
                         var dj = dest[j];
                         if (dj.bannerUrl === ai.bannerUrl) {
                             dj.goodsList.push(ai);
                             break;
                         }
                     }
                 }
             }
             return dest.map((item,index)=>{
                 return item.goodsList.map((itm,i)=>{
                     return (
                         <Fragment key={i}>
                            <GoodsItem
                            id={itm.goods_id}
                            key={i}
                            pic={itm.goods_thumb}
                            title={itm.goods_short_title}
                            discount={itm.goods_discount}
                            price={itm.goods_now_price}
                            size={itm.goods_size}
                            />
                         </Fragment>
                     )
                 })
             })
        }
     }

    render(){
        return(
            <Fragment>
                <div className='home-activities'>
                    <img src={bannerFrist} alt=''></img>
                </div>
                <div className='goodsContainer'>
                <div className='goods-display'>
                    {this.getGoodsList()}
                </div>
                    {this.getBannerList()}
                </div>
            </Fragment>
        )
    }
}